﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        #table_one {
            padding: 0;
            margin: 0;
            width: 350px;
        }

        #table_two {
            padding: 0;
            margin: 0;
            width: 200px;
        }

        em {
            font-size: x-large;
            margin: 0;
        }
    </style>
    <title>Tables</title>
</head>
<body>
    <div>
        <!-- First table start  -->
        <table id="table_one">
            <thead>
                <tr>
                    <th colspan="2">
                        <em>Fresh Fruits</em>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <p>
                            It has long been known that a diet that includes
                            at least a few servings of fresh fruit everyday
                            will keep you healthy, fit and trim.
                        </p>
                    </td>
                    <td>
                        <img src="images/fruits.jpg" width="150px" height="100px" alt="Fresh_fruits" name="fruits" />
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- First table end  -->
        <hr />
        <!-- Second table start -->
        <table id="table_two" border="1">
            <thead>
                <tr>
                    <th colspan="3">Title goes here</th>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td rowspan="3">C</td>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                    <td>G</td>
                </tr>
                <tr>
                    <td>H</td>
                    <td colspan="2">I</td>
                    <td rowspan="2">J</td>
                </tr>
                <tr>
                    <td>K</td>
                    <td>L</td>
                    <td>M</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td colspan="4">O</td>
                </tr>
            </thead>
        </table>
        <!-- Second table end -->
    </div>
</body>
</html>